<template>
  <model
    :visible="visible"
    @close="close"
    @submit="submit"
  >
    <div slot="content">
      <a-form >
        <a-row >
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">名称：</div>
              <a-input class="form_input" :default-value="form.name" :value="form.name" placeholder="请输入名称" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">手机号码：</div>
              <a-input class="form_input" :default-value="form.phone" :value="form.phone" placeholder="请输入手机号码" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">密码：</div>
              <a-input class="form_input" :default-value="form.password" :value="form.password" placeholder="不填写默认为123456" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">等级：</div>
              <a-select class="form_input" :default-value="levelList[0].value">
                <a-select-option style="" :value="item.value" v-for="(item ,index ) in levelList" :key="index">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">代理类型：</div>
              <a-select class="form_input" :value="form.payType" >
                <a-select-option :value="0">
                  套餐计费
                </a-select-option>
                <a-select-option :value="1">
                  分钟计费
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">上级：</div>
              <a-select class="form_input" :default-value="userList[0].id">
                <a-select-option style="" :value="item.id" v-for="(item ,index ) in userList" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">外呼开始时间：</div>
              <a-input class="form_input" :value="form.start_time" placeholder="请输入名称" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">外呼结束时间：</div>
              <a-input class="form_input" v-model="form.end_time" placeholder="请输入名称" />
            </div>
          </a-col>
          <a-col :span="24">
            <div class="form_item">
              <div class="form_title">备注：</div>
              <a-input class="form_textarea" :default-value="form.remarks" v-model="form.remarks" type="textarea" placeholder="请输入名称" />
            </div>
          </a-col>
        </a-row>

      </a-form>
    </div>
  </model>
</template>

<script>
import { Model } from '@/components'
const levelList = [
  {
    title: '代理商',
    value: 0
  },
  {
    title: '企业管理员',
    value: 1
  },
  {
    title: '普通用户',
    value: 2
  }
]
const userList = [
  {
    name: '系统管理员',
    id: 0
  },
  {
    name: '测试1',
    id: 1
  },
  {
    name: '测试2',
    id: 2
  }
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Number,
      default: () => 0
    },
    userData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    Model
  },
  data () {
    return {
      titleList: ['新建', '编辑'],
      levelList,
      form: {
        name: '',
        phone: '',
        password: '',
        start_time: '07:30',
        end_time: '20:30',
        remarks: '',
        payType: 0
      },
      userList
    }
  },
  created () {
  },
  methods: {
    setData (e) {
      this.form.name = e.name
      this.form.phone = e.phone
      this.form.password = e.password
      this.form.start_time = e.start_time
      this.form.end_time = e.end_time
      this.form.remarks = e.remarks
      this.form.payType = e.payType
    },
    initModel () {
      this.form.name = ''
      this.form.phone = ''
      this.form.password = ''
      this.form.start_time = ''
      this.form.end_time = ''
      this.form.remarks = ''
      this.form.payType = 0
    },
    close () {
      this.initModel()
      this.$emit('close')
    },
    submit () {
      console.log(this.form)
    }
  }
}
</script>
<style lang='less' scoped>

.form_item{
  display: flex;
  justify-content: left;
  align-items: center;
  min-height: 70px;
  .form_title{
    width: 70px;
  }
  .form_input{
    width: 70%;
  }
  .form_textarea{
    width: 85%;
    height: 60px;
    margin: 20px 0;
  }
  .form_image{
    width: 85%;
  }
}

</style>
